<template>
	<view class="content">
<!-- 		<view class="tophead">
			<uni-icons type="left" color="#666" size="26" @click="retFn"></uni-icons>
			<view class="">
				选择计算方式
			</view>
			<view class="" style="width: 100rpx;display: flex;justify-content: flex-end;align-items: center;">
				<view class="" style="margin-right: 20rpx;">
					<uni-icons type="help" color="#000000" size="26" @click="auxiliaryCurrentMeasurementFn"></uni-icons>
				</view>
			</view>
		</view> -->
		<u-navbar title="流量计算" :leftIconSize="24" :bgColor="bgColor" rightIcon="question-circle" :autoBack="true"
			:placeholder="true" safeAreaInsetTop>
			<view class="u-nav-slot" slot="right" @click="auxiliaryCurrentMeasurementFn">
				<u-icon name="question-circle" color="#000" size="24"></u-icon>
			</view>
		</u-navbar>
		<!-- <view class="flx"> -->

		<view class="text-area" hover-class="text-area_ac" @click="currentMeasuringCarFn">
			<view class="text-i">
				<image class="img" src="@/static/celac.png" mode=""></image>
				<view class="">
					流速公式（信号数）
				</view>
			</view>
		</view>
		<view class="text-area" hover-class="text-area_ac" @click="labourCablewayFn">
			<view class="text-i">
				<image class="img" src="@/static/jisq.png" mode=""></image>
				<view class="">
					流速流量（点流速）
				</view>
			</view>
		</view>
		<view class="text-area" hover-class="text-area_ac" @click="additionCoefficient">
			<view class="text-i">
				<image class="img" src="@/static/celg.png" mode=""></image>
				<view class="">
					流速流量（乘系数）
				</view>
			</view>
		</view>
		<view class="text-area" hover-class="text-area_ac" @click="powerFunction">
			<view class="text-i">
				<image class="img" src="@/static/quxian.png" mode=""></image>
				<view class="">
					曲线流量（幂函数）
				</view>
			</view>
		</view>
		<view class="text-area" hover-class="text-area_ac" @click="freeFlow">
			<view class="text-i">
				<image class="img" src="@/static/meiri.png" mode=""></image>
				<view class="">
					过闸流量（自由流）
				</view>
			</view>
		</view>
		<view class="text-area" hover-class="text-area_ac" @click="homogeneousFlow">
			<view class="text-i">
				<image class="img" src="@/static/nianj.png" mode=""></image>
				<view class="">
					设计流量（均匀流）
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: '#f1f4f6',
				title: 'Hello',
			}
		},
		onLoad() {
			this.infoProFn()
		},
		methods: {
			// 返回
			retFn() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 点流速
			labourCablewayFn() {
				uni.navigateTo({
					url: '/pages/currentMeasuringCar/increaseList?toolName=' + '流量计算器(点流速)'
				});
			},
			// 信号数
			currentMeasuringCarFn(){
				uni.navigateTo({
					url: '/pages/currentMeasuringCar/currentMeterList?toolName=' + '流量计算器(信号数)'
				});
			},
			//加系数 曲线流量
			additionCoefficient(){
				
			},
			//幂函数
			powerFunction(){
				uni.navigateTo({
					url: '/pages/currentMeasuringCar/increaseList?toolName=' + '曲线流量'
				});
			},
			//自由流
			freeFlow(){
				
			},
			//均匀流
			homogeneousFlow(){
				
			},
			auxiliaryCurrentMeasurementFn(){
				uni.navigateTo({
					url: '/pages/manualFlowMeasurement/gongnengshuoming?id=' + '测流方式'
				});
			
			},
			// 登录用户信息
			infoProFn() {
				console.log('登录断面');
				uni.$u.http.get('/system/user/profile').then(res => {
					if (res.code == 200) {
						console.log('登录用户信息');
					} else {
						uni.redirectTo({
							url: '/pages/login'
						});
					}
				}).catch(err => {
					uni.redirectTo({
						url: '/pages/login'
					});
					console.log('错误', err);
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.tophead {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 80rpx 20rpx 10rpx 20rpx;
		color: #000000;
		background-color: #f3f3f3;
	}
	.content {
		padding: 0rpx 30rpx 30rpx 30rpx;

		.text-area {
			font-size: 50rpx;
			color: #354e87;
			border-radius: 30rpx;
			margin: 30rpx 0;

			.text-i {
				padding: 25rpx 15rpx;
				border-radius: 20rpx;
				border: 5rpx solid #ffffff;
				box-shadow: 0 0 10rpx 10rpx rgba(125, 139, 170, 0.2);
				display: flex;
				justify-content: space-around;
				align-items: center;

				.img {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}

		.text-area_ac {
			background-color: #c1ceda;
		}

		.text-ar {
			margin-top: 20rpx;
			font-size: 40rpx;
			color: #354e87;
			border-radius: 300rpx;
			padding: 10rpx;
			border: 5rpx solid #ffffff;
			box-shadow: 0 0 10rpx 10rpx rgba(125, 139, 170, 0.2);
			display: flex;
			justify-content: space-around;
			align-items: center;

			.text-i {}

			.img {
				width: 80rpx;
				height: 80rpx;
			}
		}
		.celouzd {
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
		
			.celouzd_box {
				padding: 20rpx 30rpx;
				border-radius: 20rpx;
				border: 1rpx solid #000;
				background-color: #e4ebef;
				color: #000;
				font-size: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.celouzd_av {
				background-color: #b8c7ce;
			}
		}

		.text-ar_ac {
			background-color: #c1ceda;
		}
	}
	.u-nav-slot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// border-width: 0.5rpx;
			// border-radius: 100rpx;
			// border-color: $u-border-color;
			padding: 5rpx 10rpx;
			// opacity: 0.8;
		}

</style>
<style>
	page {
		background-color: #f1f4f6;
	}
</style>